import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import type { ProColumns, ActionType } from "@ant-design/pro-table";
import React, { useEffect, useState, useRef } from "react";
import { Card, Tabs, Row, Statistic, Col, Descriptions } from "antd";
import { DynamicFormItem } from "@/components/DynamicForm";
import { getPartner } from "./service";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	const actionRef = useRef<ActionType>();
	const classList = [
		{ label: "全部", value: 0 },
		{ label: "普通推广员", value: 10 },
		{ label: "社会推广员", value: 20 },
	];
	const [partnerType, setPartnerType] = useState<any>("");
	const [partner, setPartner] = useState<any>({});
	const getPartnerList = async () => {
		const res = await getPartner();
		setPartner({
			dayProNumber: res?.data.dayProNumber,
			proNumber: res?.data.proNumber,
			proSum: res?.data.proSum,
		});
	};
	// 表格项
	const columns: ProColumns[] = [
		{
			title: "用户名称",
			dataIndex: "userName",
			hideInTable: true,
		},
		{
			title: "用户手机号",
			dataIndex: "phone",
			hideInTable: true,
		},
		{
			title: "小区名称",
			dataIndex: "communityName",
			hideInTable: true,
		},
		{
			title: "推广员ID",
			dataIndex: "id",
			search: false,
		},
		{
			title: "推广员信息",
			dataIndex: "applyUserName",
			search: false,
		},
		{
			title: "所属小区",
			dataIndex: "communityName",
			search: false,
		},
		{
			title: "用户手机号",
			dataIndex: "applyUserPhone",
			search: false,
		},
		{
			title: "推广员类型",
			dataIndex: "partnerType",
			search: false,
			valueEnum: {
				20: "社区推广员",
				10: "普通推广员",
			},
		},
		{
			title: "加入时间",
			dataIndex: "checkTime",
			search: false,
		},
		{
			title: "推广人数",
			dataIndex: "proNumber",
			search: false,
		},
		{
			title: "推广收益",
			dataIndex: "promotionalBenefits",
			search: false,
			render: (_, record: any) => {
				return record.promotionalBenefits / 100;
			},
		},
		// {
		// 	title: "推广收益上限",
		// 	dataIndex: "phone",
		// 	search: false,
		// },
		{
			title: "已提现收益",
			dataIndex: "withdrawalProceeds",
			search: false,
			render: (_, record: any) => {
				return record.withdrawalProceeds / 100;
			},
		},
	];

	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "text",
				label: "推广员信息",
				name: "applyUserName",
				required: true,
				fieldProps: {
					disabled: true,
				},
			},
			{
				type: "text",
				label: "所属小区",
				name: "communityName",
				required: true,
			},
			// {
			// 	type: "text",
			// 	label: "推广员类型",
			// 	name: "partnerType",
			// },
			{
				type: "select",
				label: "推广员类型",
				name: "partnerType",
				options: classList,
				required: true,
			},
			{
				type: "text",
				label: "加入时间",
				name: "checkTime",
				required: true,
				fieldProps: {
					disabled: true,
				},
			},
			{
				type: "text",
				label: "推广人数",
				name: "proNumber",
				required: true,
				fieldProps: {
					disabled: true,
				},
			},
			{
				type: "text",
				label: "推广收益",
				required: true,
				name: "promotionalBenefits",
				fieldProps: {
					disabled: true,
				},
			},
			// {
			// 	type: "text",
			// 	label: "推广收益上线",
			// 	name: "lat",
			// 	fieldProps: {
			// 		disabled: true,
			// 	},
			// },
			{
				type: "text",
				label: "已提现收益",
				name: "withdrawalProceeds",
				required: true,
				fieldProps: {
					disabled: true,
				},
			},
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "id",
		scroll: { x: 1000 },
		columns,
		actionRef,
		listProps: {
			url: "/promoter/page-list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
					partnerType,
				};
			},
		},
		// updateProps: {
		// 	url: "/community/edit",
		// 	method: "POST",
		// 	requestType: "params",
		// 	paramsHandle: ({ ...params }: any, record: any) => {
		// 		return {
		// 			...params,
		// 		};
		// 	},
		// 	modalProps: {
		// 		formValuesHandle: async (record: any) => {
		// 			const { ...others } = record;
		// 			return {
		// 				...others,
		// 			};
		// 		},

		// 		formProps: {
		// 			labelCol: { span: 8 },
		// 		},
		// 		formItemsHandle: (_: any, vm: any) => {
		// 			return getFormItems(vm, true);
		// 		},
		// 	},
		// },
		handleOperating: (items: any[]) => [
			{
				type: "modal",
				props: {
					btnText: "详情",
					modalProps: {
						width: 1200,
						footer: false,
						title: "详情",
						content: {
							render: (vm: any, getModalRef: any, from: any) => {
								let result = vm.state.record;
								return (
									<div>
										<Descriptions title="推广员详情">
											<Descriptions.Item label="推广员ID">
												{result.id}
											</Descriptions.Item>
											<Descriptions.Item label="推广人code">
												{result.userCode}
											</Descriptions.Item>
											<Descriptions.Item label="推广人类型">
												{result.partnerType == "10"
													? "普通推广员"
													: "社区推广员"}
											</Descriptions.Item>
											<Descriptions.Item label="小区code">
												{result.communityCode}
											</Descriptions.Item>
											<Descriptions.Item label="申请状态">
												{result.applyStatus == "10"
													? "提交申请"
													: result.applyStatus == "20"
													? "审核通过"
													: "审核拒绝"}
											</Descriptions.Item>
											<Descriptions.Item label="创建日期">
												{result.checkTime}
											</Descriptions.Item>
											<Descriptions.Item label="推广人数">
												{result.proNumber}
											</Descriptions.Item>
											<Descriptions.Item label="推广收益">
												{result.promotionalBenefits / 100}
											</Descriptions.Item>
											<Descriptions.Item label="已提现收益">
												{result.withdrawalProceeds / 100}
											</Descriptions.Item>
										</Descriptions>
									</div>
								);
							},
						},
					},
				},
			},
			...items,
		],
		tableBefore: () => {
			return (
				<div>
					<Card style={{ marginBottom: 20 }}>
						<Row>
							<Col span={6}>
								<Statistic title="推广员今日活跃" value={0} />
							</Col>
							<Col span={6}>
								<Statistic title="推广员总数" value={partner.proSum} />
							</Col>
							<Col span={6}>
								<Statistic title="今日推广总数" value={partner.dayProNumber} />
							</Col>
							<Col span={6}>
								<Statistic title="推广总数" value={partner.proNumber} />
							</Col>
						</Row>
					</Card>
					<Card>
						<Tabs
							onChange={(activeKey) => {
								setPartnerType(activeKey);
								actionRef.current?.reload();
							}}
						>
							<Tabs.TabPane tab="全部" key=""></Tabs.TabPane>
							<Tabs.TabPane tab="社区推广员" key="20"></Tabs.TabPane>
							<Tabs.TabPane tab="普通推广员" key="10"></Tabs.TabPane>
						</Tabs>
					</Card>
				</div>
			);
		},
	};

	// 初始化加载数据
	useEffect(() => {
		getPartnerList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
